<template>
    <el-pagination
        class="material-lib-pagination"
        layout="total, prev, pager, next, sizes"
        align="right"
        background
        :total="total"
        :page-size="pageSize"
        :page-sizes="[15, 25, 50, 100]"
        :current-page="page"
        @size-change="changeSizeHandler"
        @current-change="changePageHandler">
    </el-pagination>
</template>
<script setup lang="ts">
import { ref, withDefaults } from 'vue';

interface Props {
    page: number;
    pageSize: number;
    total: number;
}

withDefaults(defineProps<Props>(), {
    total: 0,
    pageSize: 15,
    page: 1
});

const emit = defineEmits(['pageChange', 'sizeChange']);

const changePageHandler = pageNum => {
    emit('pageChange', pageNum);
};

const changeSizeHandler = pageSize => {
    emit('sizeChange', pageSize);
};

defineOptions({
    name: 'Pagination'
});
</script>
<style lang="scss" scoped>
.material-lib-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 0;

    .el-pagination__sizes {
        margin-right: 0;
    }

    .el-select .el-input__inner {
        width: 80px;
    }
}
</style>
